<template>
  <div class="about">
    <h1>This is an about page</h1>
    <hr>
    <div ref="app1-container"></div>
    <hr>
    <div ref="app2-container"></div>
  </div>
</template>

<script>
import { loadMicroApp } from 'qiankun'

export default {
  name: 'About',
  data () {
    return {
      microApp1: null,
      microApp2: null
    }
  },
  mounted () {
    this.microApp1 = loadMicroApp({
      name: 'app1',
      entry: '//localhost:8085',
      container: this.$refs['app1-container'],
      props: { brand: 'qiankun' },
    })

    this.microApp2 = loadMicroApp({
      name: 'app2',
      entry: '//localhost:8086',
      container: this.$refs['app2-container'],
      props: { brand: 'qiankun' },
    })
  },
  beforeDestroy () {
    this.microApp1.unmount()
    this.microApp2.unmount()
  }
}
</script>
